<template>
	<view style="background-color: #18b566;height:100vh;overflow: auto;">
		<view style='height:15vh'>
			
		</view>
		<view v-if='showBankCode'>
			
			<view style='margin: 20px auto;width:250px;background-color: #fff;padding:10px;border-radius: 10px;'>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="bankQrcode" size='250' :auto='true'></uqrcode>
			</view>
			<view >
				<view class='amount'>
					{{amount}}
				</view>
			</view>
			<view class='tips'>
				请使用银联云闪付APP扫码完成订单的支付
			</view>
			<view class='tips' @click='showBankCode = false'>点击切换回微信/支付宝支付</view>
		</view>
		<view v-else>
			<view style='margin: 20px auto;width:250px;background-color: #fff;padding:10px;border-radius: 10px;'>
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrcode" size='250' :auto='true'></uqrcode>
			</view>
			<view >
				<view class='amount'>
					{{amount}}
				</view>
			</view>
			<view class='tips'>
				请使用微信/支付宝扫码完成订单的支付
			</view>
		</view>
		
		<view>
			<view class='footer'>
				<view style='padding:10px'>
					<view style='font-size: 14px;color:#fff;text-align: center;'>
						您也可以选择下面的方式进行支付
					</view>
					<u-row>
						<u-col span='6'>
							<view  style='padding: 10px 0px' >
								<u-button type='error' text='云闪付支付' :plain='true' shape='circle' @click='bankPay'></u-button>
							</view>
						</u-col>
						<u-col span='6'>
							<view  style='padding: 10px 0px' >
								<u-button type='primary' text='线下支付' :plain='true' shape='circle' @click='unLinePay'></u-button>
							</view>
						</u-col>
					</u-row>
					
					
					<!-- <view  v-if='balance > 0 && balance > amount' style='padding: 10px 0px' >
						<u-button type='primary' :text='btnName' :plain='true' shape='circle' @click='balancePay'></u-button>
					</view> -->
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				qrcode: 'https://www.baidu.com',
				balance: 0,
				btnName: '使用余额支付',
				invoiceId: 0,
				bankQrcode: '',
				showBankCode: false
			}
		},
		onLoad(options) {
			if(typeof(options.invoice) != 'undefined'){
				this.qrcode = `${getApp().globalData.apiBase}h5/pages/payment/redirect?invoice=${options.invoice}`
				this.invoiceId = options.invoice
				this.request.get(`public/invoices/${options.invoice}`).then((res) => {
					console.log(res.data)
					this.amount = res.data.amount
				})
			}else{
				uni.showModal({
					title: '',
					content: '参数获取失败！',
					showCancel: false,
					success: () => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			}
		},
		onShow(){
			this.request.get(`api/balances`).then((res) => {
				console.log('balance',res.data)
				if(res.data && res.data.amount){
					this.balance = res.data.amount
					this.btnName = `使用余额支付（￥${res.data.amount}）`
				}
			})
		},
		methods: {
			// 云闪付支付
			bankPay(){
				this.request.post(`api/invoices/${this.invoiceId}/pay/huifu`, {
					gateway: 'jspay',
					trade_type: 'U_NATIVE'
				}).then((res) => {
					console.log('云闪付',res.data)
					this.bankQrcode = res.data.payment.qr_code
					this.showBankCode = true
				})
			},
			unLinePay(){
				uni.navigateTo({
					url: `/pages/payment/bank-info?invoice=${this.invoiceId}`
				})
			},
			balancePay(){
				if (parseFloat(this.balance) >= parseFloat(this.amount)) {
					uni.hideLoading()
					uni.showModal({
						title: '余额支付提醒',
						content: `余额支付会直接从您平台钱包扣款，是否确定使用钱包余额支付？`,
						success: (data) => {
							if (data.confirm) {
								uni.showLoading()
								// 使用余额支付
								this.request.post( `api/invoices/${this.invoiceId}/pay/balance` ).then((res) => {
									uni.hideLoading()
									uni.showModal({
										title: '',
										content: '支付成功！',
										showCancel: false,
										success: () => {
											this.getOrders()
										}
									})
								})
							} 
						}
					})
					return
				} else {
					uni.showToast({
						title: '余额不足！',
						icon: 'none'
					})
					return
				}
			}
		}
	}
</script>

<style>
	.amount{
		font-size: 32px;
		font-weight: bold;
		color: #fff;
		text-align: center;
		padding-bottom:10px;
	}
	
	.tips{
		text-align: center;
		color: #f3f3f3;
		font-size:14px;
		padding-left: 10px
	}
</style>
